// 添加类型的 - 弹出层上的 表单标签
const baseUrl = 'http://api-breakingnews-web.itheima.net'
var add_str = `
<form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="add_form">
<div class="layui-form-item">
  <label class="layui-form-label">类别名称</label>
  <div class="layui-input-block">
    <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <label class="layui-form-label">类别别名</label>
  <div class="layui-input-block">
    <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  </div>
</div>
</form>`;
// 渲染页面
function load() {
  getCates(res=>{
    console.log(res);
    // 先清空在渲染
    $('tbody').empty()
    const { data } = res.data
    data.forEach(obj => {
      let theTr = $(`<tr>
              <td>${obj.name}</td>
              <td>${obj.alias}</td>
              <td>  
                <button myid="${obj.Id}" data-name="${obj.name}" data-alias="${obj.alias}" type="button" class="layui-btn layui-btn-xs edit">编辑</button>
  
                <button myid="${obj.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>
              </td>
            </tr>`)
      $('tbody').prepend(theTr)
    });
  })
  // axios.get(`${baseUrl}/my/article/cates`, {
  //   headers: {
  //     Authorization: localStorage.getItem('token')
  //   }
  // }).then(res => {
  //   console.log(res);
  //   // 先清空在渲染
  //   $('tbody').empty()
  //   const { data } = res.data
  //   data.forEach(obj => {
  //     let theTr = $(`<tr>
  //             <td>${obj.name}</td>
  //             <td>${obj.alias}</td>
  //             <td>  
  //               <button myid="${obj.Id}" data-name="${obj.name}" data-alias="${obj.alias}" type="button" class="layui-btn layui-btn-xs edit">编辑</button>
  
  //               <button myid="${obj.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>
  //             </td>
  //           </tr>`)
  //     $('tbody').prepend(theTr)
  //   });
  // })
}
load()
// 给添加按钮注册点击事件
$('.add').on('click',(e)=>{
  e.preventDefault()
  let index = layer.open({
    type: 1, 
    title: "新增分类",
    area: ['500px', '300px'],
    content: add_str,//这里content是一个普通的String
    success(res){
      console.log('弹出成功了');
      $('.add-form').on('submit', e => {
        e.preventDefault()
        // 看接口文档 => 需要什么=> 传什么
        const data = $('.add-form').serialize()
        addCates(data,(res)=>{
          console.log(res);
          if (res.data.status === 0) {
            layer.close(index)
            // 重新渲染页面
            load()
            layer.msg(res.data.message)
          }
        })
        // axios.post(`${baseUrl}/my/article/addcates`, data, {
        //   headers: {
        //     Authorization: localStorage.getItem('token')
        //   }
        // }).then(res => {
        //   console.log(res);
        //   if (res.data.status === 0) {
        //     layer.close(index)
        //     // 重新渲染页面
        //     load()
        //     layer.msg(res.data.message)
        //   }
        // })
      })
    }
  }); 
})
// 删除
$('tbody').on('click','.delete',(e)=>{
  const id = e.target.getAttribute('myid')
  deleteCate(id,(res)=>{
    console.log(res);
    if (res.data.status===0) {
      // load()
      $(e.target).parents('tr').remove()
      layer.msg(res.data.message)
    }
  })
  // axios.get(`${baseUrl}/my/article/deletecate/${id}`,{
  //   headers:{
  //     Authorization:localStorage.getItem('token')
  //   }
  // }).then(res=>{
  //   console.log(res);
  //   if (res.data.status===0) {
  //     // load()
  //     $(e.target).parents('tr').remove()
  //     layer.msg(res.data.message)
  //   }
  // })
})
// 编辑
$('tbody').on('click','.edit',function (e) {
  e.preventDefault()
  const name = $(this).attr('data-name')
  const alias = $(this).attr('data-alias')
  const Id = $(this).attr('myid')
  console.log(name,alias,Id);
  let index = layer.open({
    type: 1, 
    title: "新增分类",
    area: ['500px', '300px'],
    content: edit_str,//这里content是一个普通的String
    success(res){
      form.val('edit',{name,alias,Id})
      $('.add-form').on('submit', e => {
        e.preventDefault()
        const data = $('.add-form').serialize()
        updatecate(data,(res)=>{
            console.log(res);
          if(res.data.status === 0){
            layer.close(index)
            load()  // 重新渲染
            layer.msg(res.data.message)
          }
        })
        // axios.post(`${baseUrl}/my/article/updatecate`, data, {
        //   headers: {
        //     Authorization: localStorage.getItem('token')
        //   }
        // }).then(res=>{
        //   console.log(res);
        //   if(res.data.status === 0){
        //     layer.close(index)
        //     load()  // 重新渲染
        //     layer.msg(res.data.message)
        //   }
        // })
        
      })
    }
  }); 
})
// const form = layui.form;
// form.verify({
//     ctname: [
//         /^[\u4E00-\u9FA5]+$/,
//         "分类名只能是中文"
//     ],
//     aliname: [
//         /^[a-z0-9]+$/,
//         "小写英文和数字组成"
//     ]
// })
// 9. 事件委托 - 编辑按钮 - 点击事件  弹窗的内容
var edit_str = `
  <form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="edit_form" lay-filter="edit">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <input type="hidden" name="Id">
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit >确认修改</button>
      </div>
    </div>
  </form>`;


